<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="装机方案" name="first">
        <label slot="label" style="color: white;">装机方案</label>
        <el-row>
          <el-col :span="24">
            <el-table :data="planList" border="true">
              <el-table-column type="index" label="序号" align="center"></el-table-column>
              <el-table-column prop="equip_name" label="设备名称" align="center"></el-table-column>
              <el-table-column prop="cap" label="容量" align="center"></el-table-column>
              <el-table-column prop="cap_unit" label="单位" align="center"></el-table-column>
              <el-table-column prop="num" label="数量" align="center"></el-table-column>
              <el-table-column prop="num_unit" label="单位" align="center"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;text-align: center;">
          <el-col :span="8">
            <div  style=" width:90px; height:90px; background-color:#1a14ff; border-radius:50px;margin: 0 auto;">
              <span style="height:90px; line-height:90px; display:block; color:#FFF; text-align: center;">0</span>
            </div>
            <div class="grid-content bg-purple" style="margin-top: 20px;color: #ffffff;">项目总投资(万元)</div>
          </el-col>
          <el-col :span="8">
            <div style=" width:90px; height:90px; background-color:#1a14ff; border-radius:50px;margin: 0 auto;">
              <span style="height:90px; line-height:90px; display:block; color:#FFF; text-align:center">0</span>
            </div>
            <div class="grid-content bg-purple-light" style="margin-top: 20px;color: #ffffff">内部回报率(%)</div>
          </el-col>
          <el-col :span="8">
            <div style=" width:90px; height:90px; background-color:#1a14ff; border-radius:50px;margin: 0 auto;">
              <span style="height:90px; line-height:90px; display:block; color:#FFF; text-align:center">0</span>
            </div>
            <div class="grid-content bg-purple" style="margin-top: 20px;color: #ffffff">投资回收期(年)</div>
          </el-col>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="运行结果" name="second">
        <label slot="label" style="color: white;">运行结果</label>
        <div id="myChart" style="width: 1100px;height: 450px;"></div>
      </el-tab-pane>

      <el-tab-pane label="系统性结构图" name="third">
        <label slot="label" style="color: white;">系统性结构图</label>
        <div>
          <img src="./imgs/xtxjgt.jpg" alt="系统性结构图" style="width: 95%;">
        </div>
      </el-tab-pane>

      <el-tab-pane label="经济性结果" name="fourth">
        <label slot="label" style="color: white;">经济性结果</label>
        <div>
          <el-row>
            <el-col :span="24">
              <span style="float: left;color: white;">财务指标</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="table1" border="true">
                <el-table-column prop="" label="度电成本（元/度）"></el-table-column>
                <el-table-column prop="" label="动态回收周期（年）"></el-table-column>
                <el-table-column prop="" label="静态回收周期（年）"></el-table-column>
                <el-table-column prop="" label="内部收益率（%）"></el-table-column>
                <el-table-column prop="" label="资本金收益率（%）"></el-table-column>
                <el-table-column prop="" label="投资收益率（%）"></el-table-column>
                <el-table-column prop="" label="净现值（万元）"></el-table-column>
                <el-table-column prop="" label="运维成本（万元）"></el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
        <div style="margin-top: 20px;">
          <el-row>
            <el-col :span="24">
              <span style="float: left;color: white;">成本分析</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="table1" border="true">
                <el-table-column prop="" label="设备"></el-table-column>
                <el-table-column prop="" label="运维费用（万元）"></el-table-column>
                <el-table-column prop="" label="融资成本（万元）"></el-table-column>
                <el-table-column prop="" label="固定资产折旧（万元）"></el-table-column>
                <el-table-column prop="" label="残值（万元）"></el-table-column>
                <el-table-column prop="" label="合计（万元）"></el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>

      <el-tab-pane label="节能减排" name="five">
        <label slot="label" style="color: white;">节能减排</label>
        <table style="margin-top: 20px;border-collapse: collapse;color: #ffffff">
          <tr>
            <td>碳粉尘(吨)</td>
            <td>{{JNJP.TFC}}</td>
            <td>PM2.5(吨)</td>
            <td>{{JNJP.PM}}</td>
          </tr>
          <tr>
            <td>二氧化碳(吨)</td>
            <td>{{JNJP.CO2}}</td>
            <td>煤耗量(吨)</td>
            <td>{{JNJP.Coal}}</td>
          </tr>
          <tr>
            <td>二氧化硫(吨)</td>
            <td>{{JNJP.SO2}}</td>
            <td>水耗量(吨)</td>
            <td>{{JNJP.HO}}</td>
          </tr>
          <tr>
            <td>氮氧化物(吨)</td>
            <td>{{JNJP.NO}}</td>
            <td>等效植树(棵)</td>
            <td>{{JNJP.DXZS}}</td>
          </tr>
        </table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          project_id: this.$root.project_id,
          activeName: 'first',
          planList: [],
          fdjz: [],
          xsszlj: [],
          JNJP:{
            TFC: '',
            CO2: '',
            SO2: '',
            NO: '',
            PM: '',
            Coal: '',
            HO: '',
            DXZS: ''
          }
        };
      },
      created() {
        this.getResult();
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        },
        getResult(){
          this.$http.post('/iepsapi/planProgram/getPlanResult', {
            project_id: this.project_id
          }).then((res) => {
            var result = res.data.data;
            this.planList = result.installPlans;
            if(result.runResults.发电机组.length>0){
              this.fdjz = result.runResults.发电机组
            }
            if(result.runResults.吸收式制冷机.length>0){
              this.xsszlj = result.runResults.吸收式制冷机
            }
            this.drawLine();
          }).catch((error) => {
            console.log(error);
          });
        },
        drawLine(){

          let myChart = this.$echarts.init(document.getElementById('myChart'))
          myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                textStyle: {
                  color: '#ffffff'
                },
                legend: {
                    data: ['吸收式制冷机', '发电机组'],
                    textStyle: {
                      color: '#ffffff'
                    }
                },
                xAxis: [
                    {
                      type : 'category',
                      data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
                      name:"Time(h)",
                      nameTextStyle:{
                        fontSize:16,
                        padding:[100,0,30,-510],//调整x轴示例位置
                        color:'#ffffff'
                      },
                      axisLabel:{
                        show: true,
                        textStyle: {
                          color: '#ffffff'
                        }
                      }
                    }
                ],
                yAxis: [
                    {
                      type: 'value',
                      name:"Electricity(kW)",
                      nameLocation:"center",
                      nameGap:35,
                      nameRotate:90,
                      nameTextStyle:{
                        fontSize: 16,
                        color:'#ffffff'
                      },
                      //默认以千分位显示，不想用的可以在这加一段
                      axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                        show:true,
                        showMinLabel:true,
                        showMaxLabel:true,
                        formatter: function (value) {
                          return value;
                        },
                        textStyle:{
                          color:'#ffffff'
                        }
                      }
                    },
                    {
                      //默认以千分位显示，不想用的可以在这加一段
                      axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                        show:false,
                        showMinLabel:true,
                        showMaxLabel:true,
                        formatter: function (value) {
                          return value;
                        }
                      }
                    }
                ],
                series: [
                    {
                        name: '吸收式制冷机',
                        type: 'bar',
                        color: '#5555ff',
                        data:  this.fdjz

                    },{
                        name: '发电机组',
                        type: 'bar',
                        color: '#ffff00',
                        data: this.xsszlj
                    }
                ]
          });
        }
      }
  };
</script>

<style scoped="scoped">
  td{
    text-align: center;
    border: 1px blue solid;
    width: 250px;
    height: 100px;
  }
</style>
